<template>
	<view>
		<view class="header">
			<image class="center-image" src="../../static/img/mine.png" mode=""></image>
		</view>
		<view class="phoneNum">{{phone}}</view>
		<view class="searchInput">
			<input v-model="password" type="password" placeholder="请输入密码">
			<u-button class="forgetPassword" type="success">忘记密码?</u-button>
		</view>
		<u-button class="loginBtn" type="success" @click="loginPass">登录</u-button>
		<view class="loginHelp">
			<text>登录帮助</text>
		</view>
	</view>
</template>

<script>
	import {
		cpiher
	} from '../../API/loginAndRegister.js';
	export default {

		data() {
			return {
				//从本地取出的手机号
				phone: '',
				password: ''
			}
		},
		onLoad() {
			this.phone = localStorage.getItem('phone') || '';
		},
		methods: {
			loginPass() {
				cpiher({
						phone: this.phone,
						password: this.password
					})
					.then(res => {

						console.log(res.data);
						if (res.data.success) { // 假设登录成功返回的数据中有 success 字段
							console.log(res.data.success.token);
							localStorage.setItem('token', res.data.success.token);
							uni.switchTab({
								url: '/pages/homePage/homePage'
							});
						}
						// 其他处理...
					})
					.catch(error => {
						// 在这里处理错误
						console.error('Error:', error);
					});
			}
		}
	}
</script>

<style scoped>
	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		/* 水平居中 */
		height: 100rpx;
		/* 设置一个固定高度 */
		margin-top: 100rpx;

	}

	.center-image {
		width: 100rpx;
		/* 设置图片宽度 */
		height: 100rpx;
		/* 设置图片高度 */
	}

	.phoneNum {
		text-align: center;
		font-size: 40rpx;
		margin-top: 60rpx;
	}

	.searchInput {
		display: flex;
		margin: 80rpx 0 0 30rpx;
		justify-content: space-between;
		align-items: center;
	}

	.forgetPassword {
		background-color: white;
		color: #817e7c;
		margin-left: 150rpx;
	}

	.loginBtn {
		margin: 50rpx 20rpx;
		background-color: #ffa500ad;
	}

	.loginHelp {
		width: 100%;
		text-align: center;
		color: #817e7c;
		font-weight: 600;
	}
</style>